<template>
	<view class="main">
		<!-- <view class="ek-cates acea-row">
      <view :class="{active: '' == cid}" class="item"
            @click="onChangeCate({id: ''})">全部
      </view>
      <view v-for="(item, index) in cateList" :key="index" :class="{active: item.id == cid}" class="item"
            @click="onChangeCate(item)">{{ item.title }}
      </view>
    </view> -->
		<view class="notification-box">
			<image src="../../../static/2images/icon_notification.png" mode=""></image>
			<view class="noti-boxs">
				<view class="noti-box">
					<text class="notification-text" v-for="(item,index) in articeList" :key="index" @click="goDetail(item)">{{item.title}}</text>
				</view>
			</view>
			
		</view>
		<!-- <view class="ek-title">
			<view class="text">热门景区</view>
			<view class="bg"></view>
		</view> -->

		<view class="">
			<!-- <view v-for="(item, index) in dataList" :key="index" class="ek-activity-item" @click="onItemClick(item)">
				<view class="picture">
					<image class="image" :src="item.thumb" mode="widthFix"></image>
				</view>
				<view class="info-box">
					<view class="top_info">
						<view class="activity-item-title">{{ item.title }}</view>
						<view class="activity-item-time" v-if="item.type == '2' && item.is_open=='1'">{{ item.show_date }}</view>
					</view>
					<view class="activity-item-footer">
						<view class="activity-item-desc">
							<text class="acttity-item-p-unit"></text>
							<text class="acttity-item-price">免费</text>
						</view>
						<template v-if="item.type == 1">
							<view class="activity-item-xp" v-if="item.is_open == '1'">
								在线选座
							</view>
							<view class="activity-item-isNot" v-if="item.is_open == '0'">
								暂未开放
							</view>
						</template>
						<template v-else>
							<view class="activity-item-xp" v-if="item.is_open == '1'">
								在线预约
							</view>
							<view class="activity-item-isNot" v-if="item.is_open == '0'">
								暂未开放
							</view>
						</template>
					</view>

				</view>
			</view> -->
			<view class="scenics" v-for="(item, index) in dataList" @click="onItemClick(item)">
				<image class="sc-cover" :src="item.thumb"></image>
				<view class="sc-title">{{item.title}}</view>
				<view class="sc-desc">{{item.remark}}</view>
				<view class="sc-info">
					<view class="sc-time">{{item.show_date}}</view>
					<template v-if="item.min_money.price > 0">
						<view class="sc-price">¥{{item.min_money.price}}</view>
					</template>
					<template v-else>
						<view class="sc-price">免费</view>
					</template>
				</view>
			</view><!-- scenics end -->
		</view><!-- end -->
	</view>
</template>

<script>
	import dataList from "@/mixins/dataList";
	import {
		performCategoryList,
		performList,
		performScenicArticeList
	} from "@/api/2_activity";
	import {
		str2arr
	} from "@/utils";

	export default {
		mixins: [dataList],
		data() {
			return {
				cateList: [],
				articeList:[],
				cid: '',
				dataList:[]
			};
		},
		filters: {
			banner(val) {
				return str2arr(val)[0]
			}
		},
		computed:{
			getText(){
				let str = ''
				if(this.articeList.length>0){
					this.articeList.map(item=>{
						str = str+item.title
					})
				}
				
				return str
			}
		},
		onLoad() {
			this.getPerformArticeList();
			// this.setDataListReq(performList({'type':1}))
			this.getDataList()
			this.loadData();
			performCategoryList().then(res => {
				this.cateList = res.data
				// if (this.cateList.length) {
				//   this.cid = this.cateList[0].id
				//   this.setDataListPar({
				//     cid: this.cid
				//   })
				//
				// }

			})
		},
		methods: {
			goDetail(item){
				uni.navigateTo({
					url:`/pages/news_details/index?id=${item.article_id}`
				})
			},
			getPerformArticeList(){
				performScenicArticeList().then(res=>{
					this.articeList =res.data.list
				})
			},
			onChangeCate(item) {
				this.cid = item.id
				this.resetDataList()
				this.setDataListPar({
					cid: this.cid
				})
				this.getDataList()
			},
			loadData(){
				performList({'type':1}).then(res => {
					this.dataList = res.data.list;
				
				})
			},
			onItemClick(item) {
				uni.navigateTo({
					url: `/pages/2_development/scenic/details?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../user/style.scss";

	.notification-box {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		height: 88rpx;
		background-color: #fff;
		padding:  0 32rpx;
		box-sizing: border-box;
		 overflow: hidden;
		image {
			width: 38rpx;
			height: 38rpx;
			margin-right: 20rpx;
		}
		.noti-boxs{
			flex: 1;
			overflow: hidden; //（超出隐藏）
		}
		.noti-box{
			animation: 10s div linear infinite normal;
			width: 100%;
		}
		text {
			display: inline-block;
			white-space: nowrap;
			margin-right: 50rpx;
			
			// &:hover {
			// 	animation: 10s div linear infinite normal paused;

			// }
		}

	}

	@keyframes div {

		//起始位置
		0% {
			transform: translateX(110%);
			-webkit-transform: translateX(110%);
		}

		//终点位置
		100% {
			transform: translateX(-110%);
			-webkit-transform: translateX(-110%);
		}
	}


	page {
		background: #F5F5F5;
	}
	
	.main{
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
	}
	
	/** 新式布局 **/
	.text{
		height:80rpx;
		line-height: 80rpx;
	}
	.scenics{
		display: flex;
		flex-direction: column;
		margin: 10px 20rpx 0 20rpx;
		background-color: #FFF;
		border-radius: 10rpx;
		padding: 20rpx;
		
		.sc-cover{
			border-radius: 10rpx;
			flex: 1;
			width:100%;
			height:700rpx;
		}
		.sc-title{
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
			margin-top: 20rpx;
		}
		.sc-desc{
			font-size: 28rpx;
			color: #CCCCCC;
			margin-top: 20rpx;
		}
		.sc-info{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;
		}
		.sc-time{
			font-size: 28rpx;
			color: #330033;
		}
		.sc-price{
			font-size: 30rpx;
			font-weight: bold;
			color: #F44939;
		}
	}
</style>
